<template>
  <div class="home_wraper">
    <el-container>
      <el-header>
        <span>老王音乐后台管理</span>
        <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="1">处理中心</el-menu-item>
          <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项1</el-menu-item>
              <el-menu-item index="2-4-2">选项2</el-menu-item>
              <el-menu-item index="2-4-3">选项3</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="3" disabled>消息中心</el-menu-item>
          <el-menu-item index="4">
            <a href="" target="_blank">订单管理</a>
          </el-menu-item>
        </el-menu>
        <div class="admin-bar-my-account">
          <span>您好，AkiraMing</span>
          <el-avatar
            shape="square"
            :size="40"
            src="http://sdn.geekzu.org/avatar/742221f825d76845761fee10007b1a3a?s=64&d=mm&r=g"
          ></el-avatar>
        </div>
      </el-header>

      <el-container>
        <el-aside width="201px">
          <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
            <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button>
          </el-radio-group> -->
          <el-menu
            :default-active="activePath"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            :collapse="isCollapse"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            router
          >
            <el-submenu
              :index="index + ''"
              v-for="(item, index) in AllMenu"
              :key="item.id"
            >
              <template slot="title">
                <i class="el-icon-headset"></i>
                <span slot="title">{{ item.authName }}</span>
              </template>
              <el-menu-item
                :index="subItem.path"
                v-for="subItem in item.children"
                :key="subItem.id"
                @click="saveNavState(subItem.path)"
              >
                {{ subItem.title }}
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activePath: '',
      AllMenu: [],
      activeIndex2: '1',
      isCollapse: false
    }
  },
  mounted() {
    this.getusers()
    this.getSystemMenu()
    this.activePath = window.sessionStorage.getItem('activePath')
  },
  methods: {
    saveNavState: function(activePath) {
      window.sessionStorage.setItem('activePath', activePath)
    },
    getSystemMenu: function() {
      this.$http.get('api/admin/menu').then(res => {
        this.AllMenu = res.data.data
        // console.log(this.AllMenu)
      })
    },
    handleOpen(key, keyPath) {
      var aql = `
      SELECT
        songs.id,
        songs.name,
        songs.artist,
        system_song_sort.sortName
      FROM
        system_song_sort
        INNER JOIN songsort ON system_song_sort.id = songsort.pid
        INNER JOIN songs ON songs.id = songsort.songId
      WHERE
        system_song_sort.id = 1
        `
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    getusers: async function() {
      var { data: res } = await this.$http.get('api/admin/users')
      // console.log(res)
    }
  }
}
</script>

<style lang="less" scoped>
.home_wraper {
  min-width: 900px;
  height: 100%;
  width: 100%;

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .el-container {
    height: 100%;
  }
  .el-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    // padding: 0;
    background-color: #545c64;
    > span {
      width: 200px;
      font-size: 20px;
      color: aliceblue;
      font-weight: 900;
      line-height: 60px;
    }
    .admin-bar-my-account {
      display: flex;
      align-items: center;
      span:nth-child(1) {
        margin-right: 10px;
        font-size: 14px;
        color: aliceblue;
      }
    }
  }

  .el-main {
    // overflow: hidden;
    background-color: #e9edf1;
  }
  .el-menu {
    height: 100%;
  }
}
</style>
